<template>
  <div id="dragView">
    <ul class="left"
        @dragenter="dragenter"
        @dragover.prevent
        @dragleave="dragleave"
        @drop="drop">
      <li v-for="item in 5"
          :key="'left' + item"
          :id="'left' + item"
          draggable="true"
          @dragstart="dragstart"
          @drag="drag">
        左边{{ item }}
      </li>
    </ul>
    <ul class="right"
        @dragenter="dragenter"
        @dragover.prevent
        @dragleave="dragleave"
        @drop="drop">
    </ul>
    <svg width="100%"
         height="100%"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg">

      <circle cx="100"
              cy="50"
              r="40"
              stroke="black"
              stroke-width="2"
              fill="red" />

    </svg>
  </div>
  <div>{{num}}</div>
  <input type="text"
         v-model.number.lazy="inputValue">
  <el-button @click="btnClick">按钮</el-button>
</template>
<script setup lang="ts">
import utils from "@/utils.ts";
import { ref } from "vue";
const num = ref(0);

const inputValue = ref(0);
// setInterval(() => {
//   num.value++;
// }, 10);
function btnClick() {
  var timer = setInterval(() => {
    if (num.value > inputValue.value) {
      num.value--;
    } else {
      num.value++;
    }

    if (num.value === inputValue.value) {
      clearInterval(timer);
    }
  }, 1000 / Math.abs(inputValue.value - num.value));
}
var moveItem = null;
function drag(e) {
  // dedrag()
  console.log(`drag-pageY`, e.offsetX);
}
function dragstart(e) {
  e.dataTransfer.setData("Text", e.target.id);
}
function dragenter(e) {
  if (e.target.localName === "ul") {
    e.target.localName === "ul" && (e.target.style.borderColor = "blue");
  } else if (e.target.localName === "li") {
    // e.target.style.marginTop = "34px";
  }
}
var dedrag = utils.debounce(function () {
  console.log(`dedrag`);
});
var deLeave = utils.debounce(function (e) {
  if (e.target.localName === "ul") {
    e.target.localName === "ul" && (e.target.style.borderColor = "red");
  } else if (e.target.localName === "li") {
    // e.target.style.marginTop = "0";
  }
});
function dragleave(e) {
  deLeave(e);
}
function drop(e) {
  var id = e.dataTransfer.getData("Text");
  if (e.target.localName === "li") {
    var parentNode = e.target.parentNode;
    parentNode.insertBefore(document.getElementById(id), e.target);
  } else {
    e.target.appendChild(document.getElementById(id));
  }
  e.target.localName === "ul" && (e.target.style.borderColor = "red");
}
</script>
<style lang="scss">
#dragView {
  overflow: hidden;
  width: 500px;
  text-align: center;
  line-height: 2em;
  user-select: none;
  li {
    border: 1px solid #ddd;
    cursor: move;
    transition: 0.5s all;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    border: 1px solid black;
    position: relative;
  }
  .right {
    float: right;
    width: 200px;
    height: 400px;
    border: 1px solid red;
  }
}
</style>